<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理系统 - 管理员</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        html, body, #app {
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            height: 100vh;
            min-height: 100vh;
            background: #f5f7fa;
            overflow: hidden;
        }
        #app {
            height: 100vh;
            min-height: 100vh;
            width: 100vw;
            min-width: 100vw;
            margin: 0;
            padding: 0;
        }
        .el-container {
            height: 100vh;
            min-height: 100vh;
            width: 100vw;
            min-width: 100vw;
        }
        .el-header {
            background-color: #409EFF;
            color: white;
            line-height: 60px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
        .el-aside {
            background-color: #fff;
            border-right: solid 1px #e6e6e6;
            box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
            height: calc(100vh - 60px);
            min-height: calc(100vh - 60px);
            overflow-y: auto;
        }
        .el-main {
            background-color: #f5f7fa;
            padding: 20px;
            min-height: calc(100vh - 60px);
            height: calc(100vh - 60px);
            box-sizing: border-box;
            overflow: auto;
        }
        .el-menu {
            border-right: none;
        }
        .el-menu-item {
            height: 50px;
            line-height: 50px;
        }
        .el-menu-item i {
            margin-right: 5px;
        }
        .operation-buttons {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .page-title {
            font-size: 20px;
            color: #303133;
            margin: 0;
        }
        .el-table {
            margin-top: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .el-form {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .el-form-item__label {
            font-weight: bold;
        }
        .el-button {
            padding: 10px 20px;
        }
        .el-button--primary {
            background-color: #409EFF;
        }
        .el-button--danger {
            background-color: #F56C6C;
        }
        .el-table th {
            background-color: #f5f7fa;
        }
        .el-pagination {
            margin-top: 20px;
            text-align: right;
        }
        .search-area {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .search-form .el-form-item {
            margin-bottom: 0;
        }
        .search-form .el-form-item__label {
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <h2>银行管理系统 - 管理员</h2>
                <div>
                    <el-button type="text" style="color: white;" @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>客户管理</span>
                            </template>
                            <el-menu-item index="1-1">客户列表</el-menu-item>
                            <el-menu-item index="1-2">添加客户</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-bank-card"></i>
                                <span>银行卡管理</span>
                            </template>
                            <el-menu-item index="2-1">银行卡列表</el-menu-item>
                            <el-menu-item index="2-2">添加银行卡</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-money"></i>
                                <span>交易管理</span>
                            </template>
                            <el-menu-item index="3-1">交易记录</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-coin"></i>
                                <span>存款管理</span>
                            </template>
                            <el-menu-item index="4-1">存款类型</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 客户列表 -->
                    <div v-if="currentView === 'userList' && userList.length">
                        <div class="operation-buttons">
                            <h3 class="page-title">客户列表</h3>
                            <div>
                                <el-button type="primary" @click="showUserSearch = !showUserSearch">
                                    <i class="el-icon-search"></i> 高级搜索
                                </el-button>
                                <el-button type="primary" @click="exportUserData">
                                    <i class="el-icon-download"></i> 导出数据
                                </el-button>
                            </div>
                        </div>
                        
                        <!-- 客户高级搜索区域 -->
                        <el-collapse-transition>
                            <div v-show="showUserSearch" class="search-area">
                                <el-form :inline="true" :model="userSearchForm" class="search-form">
                                    <el-form-item label="精确查询">
                                        <el-input v-model="userSearchForm.exactId" placeholder="客户编号" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="模糊查询">
                                        <el-input v-model="userSearchForm.keyword" placeholder="姓名/身份证号" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="范围查询">
                                        <el-input v-model="userSearchForm.minId" placeholder="最小客户编号" style="width: 120px"></el-input>
                                        <span style="margin: 0 5px">-</span>
                                        <el-input v-model="userSearchForm.maxId" placeholder="最大客户编号" style="width: 120px"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="searchUsers">搜索</el-button>
                                        <el-button @click="resetUserSearch">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-collapse-transition>
                        <el-table :data="userList" style="width: 100%" border stripe>
                            <el-table-column prop="customerID" label="客户编号" width="100"></el-table-column>
                            <el-table-column prop="customerName" label="客户姓名" width="120"></el-table-column>
                            <el-table-column prop="pid" label="身份证号" width="180"></el-table-column>
                            <el-table-column prop="telephone" label="联系电话" width="120"></el-table-column>
                            <el-table-column prop="address" label="联系地址"></el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-else-if="currentView === 'userList'">
                        <div class="operation-buttons">
                            <h3 class="page-title">客户列表</h3>
                            <el-button type="primary" @click="exportUserData">
                                <i class="el-icon-download"></i> 导出数据
                            </el-button>
                        </div>
                        <el-empty description="暂无数据"></el-empty>
                    </div>

                    <!-- 添加客户表单 -->
                    <div v-if="currentView === 'addUser'">
                        <h3 class="page-title">{{ isEditUser ? '编辑客户' : '添加客户' }}</h3>
                        <el-form :model="userForm" label-width="120px" :rules="userRules" ref="userForm">
                            <el-form-item label="客户姓名" prop="customerName">
                                <el-input v-model="userForm.customerName" placeholder="请输入客户姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号" prop="pid">
                                <el-input v-model="userForm.pid" placeholder="请输入身份证号"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="telephone">
                                <el-input v-model="userForm.telephone" placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                            <el-form-item label="联系地址">
                                <el-input v-model="userForm.address" placeholder="请输入联系地址（可选）"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="isEditUser ? submitEditUserForm() : submitUserForm()">{{ isEditUser ? '保存修改' : '提交' }}</el-button>
                                <el-button @click="resetUserForm">重置</el-button>
                                <el-button @click="backToUserList">返回列表</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 银行卡列表 -->
                    <div v-if="currentView === 'cardList'">
                        <div class="operation-buttons">
                            <h3 class="page-title">银行卡列表</h3>
                            <div>
                                <el-button type="primary" @click="showCardSearch = !showCardSearch">
                                    <i class="el-icon-search"></i> 高级搜索
                                </el-button>
                                <el-button type="primary" @click="exportCardData">
                                    <i class="el-icon-download"></i> 导出数据
                                </el-button>
                            </div>
                        </div>

                        <!-- 银行卡高级搜索区域 -->
                        <el-collapse-transition>
                            <div v-show="showCardSearch" class="search-area">
                                <el-form :inline="true" :model="cardSearchForm" class="search-form">
                                    <el-form-item label="精确查询">
                                        <el-input v-model="cardSearchForm.exactCardId" placeholder="卡号" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="模糊查询">
                                        <el-input v-model="cardSearchForm.keyword" placeholder="卡号/客户ID" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="余额范围">
                                        <el-input v-model="cardSearchForm.minBalance" placeholder="最小余额" style="width: 120px"></el-input>
                                        <span style="margin: 0 5px">-</span>
                                        <el-input v-model="cardSearchForm.maxBalance" placeholder="最大余额" style="width: 120px"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="searchCards">搜索</el-button>
                                        <el-button @click="resetCardSearch">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-collapse-transition>
                        <el-table :data="cardList" style="width: 100%" border stripe>
                            <el-table-column prop="cardID" label="卡号" width="180"></el-table-column>
                            <el-table-column prop="curID" label="币种" width="100"></el-table-column>
                            <el-table-column label="存款类型" width="120">
                                <template slot-scope="scope">
                                    {{ getSavingName(scope.row.savingID) }}
                                </template>
                            </el-table-column>
                            <el-table-column 
                                prop="openDate" 
                                label="开户日期" 
                                width="180">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.openDate) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="balance" label="余额" width="120"></el-table-column>
                            <el-table-column 
                                prop="isReportLoss" 
                                label="挂失状态" 
                                width="100">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.isReportLoss === '是' || scope.row.isReportLoss === '1'">已挂失</span>
                                    <span v-else>正常</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="customerID" label="客户编号" width="100"></el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="handleCardEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleCardDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 添加银行卡表单 -->
                    <div v-if="currentView === 'addCard'">
                        <h3 class="page-title">{{ isEditCard ? '编辑银行卡' : '添加银行卡' }}</h3>
                        <el-form :model="cardForm" label-width="120px" :rules="cardRules" ref="cardForm">
                            <el-form-item v-if="isEditCard" label="卡号">
                                <el-input v-model="cardForm.cardID" disabled></el-input>
                                <div style="color: #666; font-size: 12px; margin-top: 5px;">卡号格式：10103576 + 8位随机数字，由系统自动生成</div>
                            </el-form-item>
                            <el-form-item label="币种" prop="curID">
                                <el-input v-model="cardForm.curID" placeholder="请输入币种，默认为RMB"></el-input>
                            </el-form-item>
                            <el-form-item label="存款类型" prop="savingID">
                                <el-select v-model="cardForm.savingID" placeholder="请选择存款类型" style="width: 100%">
                                    <el-option v-for="item in depositTypes" :key="item.savingID" :label="item.savingName" :value="item.savingID"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开户金额" prop="openMoney">
                                <el-input-number v-model="cardForm.openMoney" :min="0" :precision="2" style="width: 100%"></el-input-number>
                            </el-form-item>
                            <el-form-item label="密码" prop="pass">
                                <el-input v-model="cardForm.pass" type="password" placeholder="请输入密码，默认为888888"></el-input>
                            </el-form-item>
                            <el-form-item label="客户编号" prop="customerID">
                                <el-input v-model="cardForm.customerID" placeholder="请输入客户编号"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="isEditCard ? submitEditCardForm() : submitCardForm()">{{ isEditCard ? '保存修改' : '提交' }}</el-button>
                                <el-button @click="resetCardForm">重置</el-button>
                                <el-button @click="backToCardList">返回列表</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 交易记录列表 -->
                    <div v-if="currentView === 'tradeList'">
                        <div class="operation-buttons">
                            <h3 class="page-title">交易记录</h3>
                            <el-button type="primary" @click="exportTradeData">
                                <i class="el-icon-download"></i> 导出数据
                            </el-button>
                        </div>
                        <el-table :data="tradeList" style="width: 100%" border stripe>
                            <el-table-column prop="tradeDate" label="交易时间" width="180"></el-table-column>
                            <el-table-column prop="tradeType" label="交易类型" width="120"></el-table-column>
                            <el-table-column prop="cardID" label="卡号" width="180"></el-table-column>
                            <el-table-column prop="tradeMoney" label="交易金额" width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.tradeMoney !== undefined && scope.row.tradeMoney !== null ? scope.row.tradeMoney : '—' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注"></el-table-column>
                        </el-table>
                    </div>

                    <!-- 存款类型列表 -->
                    <div v-if="currentView === 'depositList'">
                        <div class="operation-buttons">
                            <h3 class="page-title">存款类型列表</h3>
                            <div>
                                <el-button type="primary" @click="showDepositSearch = !showDepositSearch">
                                    <i class="el-icon-search"></i> 高级搜索
                                </el-button>
                                <el-button type="primary" @click="showAddDepositDialog = true" style="margin-left: 10px;">新增存款类型</el-button>
                                <el-button type="primary" @click="exportDepositData">
                                    <i class="el-icon-download"></i> 导出数据
                                </el-button>
                            </div>
                        </div>

                        <!-- 新增存款类型弹窗 -->
                        <el-dialog title="新增存款类型" :visible.sync="showAddDepositDialog">
                            <el-form :model="addDepositForm" label-width="80px">
                                <el-form-item label="类型名称">
                                    <el-input v-model="addDepositForm.savingName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="描述">
                                    <el-input v-model="addDepositForm.descrip" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer">
                                <el-button @click="showAddDepositDialog = false">取消</el-button>
                                <el-button type="primary" @click="submitAddDeposit">提交</el-button>
                            </div>
                        </el-dialog>

                        <!-- 存款类型高级搜索区域 -->
                        <el-collapse-transition>
                            <div v-show="showDepositSearch" class="search-area">
                                <el-form :inline="true" :model="depositSearchForm" class="search-form">
                                    <el-form-item label="精确查询">
                                        <el-input v-model="depositSearchForm.exactId" placeholder="存款类型ID" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="模糊查询">
                                        <el-input v-model="depositSearchForm.keyword" placeholder="类型名称/描述" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="searchDeposits">搜索</el-button>
                                        <el-button @click="resetDepositSearch">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-collapse-transition>
                        <el-table :data="depositList" style="width: 100%" border stripe>
                            <el-table-column prop="savingID" label="类型编号" width="100"></el-table-column>
                            <el-table-column prop="savingName" label="类型名称" width="180"></el-table-column>
                            <el-table-column prop="descrip" label="描述"></el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="handleDepositEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleDepositDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!-- 添加存款类型表单 -->
                    <div v-if="currentView === 'addDeposit'">
                        <h3 class="page-title">{{ isEditDeposit ? '编辑存款类型' : '添加存款类型' }}</h3>
                        <el-form :model="depositForm" label-width="120px" ref="depositForm">
                            <el-form-item label="存款类型编号" prop="savingID">
                                <el-input v-model="depositForm.savingID" placeholder="请输入存款类型编号"></el-input>
                            </el-form-item>
                            <el-form-item label="存款类型名称" prop="savingName">
                                <el-input v-model="depositForm.savingName" placeholder="请输入存款类型名称"></el-input>
                            </el-form-item>
                            <el-form-item label="存款类型描述" prop="descrip">
                                <el-input v-model="depositForm.descrip" placeholder="请输入存款类型描述"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="isEditDeposit ? submitEditDepositForm() : submitDepositForm()">{{ isEditDeposit ? '保存修改' : '提交' }}</el-button>
                                <el-button @click="resetDepositForm">重置</el-button>
                                <el-button @click="backToDepositList">返回列表</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        // 身份证号验证方法
        const validateIdCard = (rule, value, callback) => {
            if (!value) {
                callback();
                return;
            }

            const idCardReg = /(^\d{17}(\d|X|x)$)/;
            if (!idCardReg.test(value)) {
                callback(new Error('身份证号格式不正确，应为18位'));
                return;
            }
            
            // 进一步验证身份证号的合法性
            // 加权因子
            const weightFactor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            // 校验码
            const checkCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
            
            let sum = 0;
            for (let i = 0; i < 17; i++) {
                sum += parseInt(value[i]) * weightFactor[i];
            }
            
            const last = checkCode[sum % 11];
            if (last !== value[17].toUpperCase()) {
                callback(new Error('身份证号校验位不正确'));
                return;
            }
            
            callback();
        };
        
        // 手机号验证方法
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback();
                return;
            }
            
            const phoneReg = /^1[3-9]\d{9}$/;
            if (!phoneReg.test(value)) {
                callback(new Error('手机号格式不正确，应为11位数字且以1开头'));
                return;
            }
            callback();
        };

        new Vue({
            el: '#app',
            data: {
                currentView: 'userList',
                userList: [],
                cardList: [],
                tradeList: [],
                depositList: [],
                depositTypes: [],
                userForm: {
                    customerName: '',
                    pid: '',
                    telephone: '',
                    address: ''
                },
                cardForm: {
                    cardID: '',
                    curID: 'RMB',
                    savingID: '',
                    openMoney: 0,
                    pass: '888888',
                    customerID: ''
                },
                userRules: {
                    customerName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
                    pid: [
                        { required: true, message: '请输入身份证号', trigger: 'blur' },
                        { validator: validateIdCard, trigger: 'blur' }
                    ],
                    telephone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    address: [{ required: false, message: '请输入联系地址', trigger: 'blur' }]
                },
                cardRules: {
                    curID: [{ required: false, message: '请输入币种', trigger: 'blur' }],
                    savingID: [{ required: true, message: '请选择存款类型', trigger: 'change' }],
                    openMoney: [{ required: true, message: '请输入开户金额', trigger: 'blur' }],
                    pass: [{ required: false, message: '请输入密码', trigger: 'blur' }],
                    customerID: [{ required: true, message: '请输入客户编号', trigger: 'blur' }]
                },
                isEditUser: false,
                isEditCard: false,
                isEditDeposit: false,
                depositForm: { savingID: '', savingName: '', descrip: '' },
                userSearchKeyword: '',
                cardSearchKeyword: '',
                depositSearchKeyword: '',
                showUserSearch: false,
                showCardSearch: false,
                showDepositSearch: false,
                userSearchForm: {
                    exactId: '',
                    keyword: '',
                    minId: '',
                    maxId: ''
                },
                cardSearchForm: {
                    exactCardId: '',
                    keyword: '',
                    minBalance: '',
                    maxBalance: ''
                },
                depositSearchForm: {
                    exactId: '',
                    keyword: ''
                },
                showAddDepositDialog: false,
                addDepositForm: {
                    savingName: '',
                    descrip: ''
                }
            },
            created() {
                this.loadUserList();
                this.loadCardList();
                this.loadTradeList();
                this.loadDepositList();
            },
            methods: {
                handleSelect(key) {
                    switch(key) {
                        case '1-1': this.showUserList(); break;
                        case '1-2': this.showAddUser(); break;
                        case '2-1': this.showCardList(); break;
                        case '2-2': this.showAddCard(); break;
                        case '3-1': this.showTradeList(); break;
                        case '4-1': this.showDepositList(); break;
                    }
                },
                logout() {
                    window.location.href = 'index.html';
                },
                // 视图切换方法
                showUserList() {
                    this.currentView = 'userList';
                    this.loadUserList();
                    this.cardList = [];
                    this.tradeList = [];
                    this.depositList = [];
                },
                showAddUser() {
                    this.currentView = 'addUser';
                    this.isEditUser = false;
                    this.userForm = { customerName: '', pid: '', telephone: '', address: '' };
                    // 添加延时确保表单已渲染后再重置
                    this.$nextTick(() => {
                        if (this.$refs.userForm) {
                            this.$refs.userForm.clearValidate();
                        }
                    });
                },
                showCardList() {
                    this.currentView = 'cardList';
                    this.loadCardList();
                    this.userList = [];
                    this.tradeList = [];
                    this.depositList = [];
                },
                showAddCard() {
                    this.currentView = 'addCard';
                    this.isEditCard = false;
                    this.cardForm = { cardID: '', curID: 'RMB', savingID: '', openMoney: 0, pass: '888888', customerID: '' };
                    // 添加延时确保表单已渲染后再重置
                    this.$nextTick(() => {
                        if (this.$refs.cardForm) {
                            this.$refs.cardForm.clearValidate();
                        }
                    });
                },
                showTradeList() {
                    this.currentView = 'tradeList';
                    this.loadTradeList();
                    this.userList = [];
                    this.cardList = [];
                    this.depositList = [];
                },
                showDepositList() {
                    this.currentView = 'depositList';
                    this.loadDepositList();
                    this.userList = [];
                    this.cardList = [];
                    this.tradeList = [];
                },

                // 加载数据方法
                loadUserList() {
                    axios.get('/api/user/list')
                        .then(response => {
                            this.userList = response.data.data || response.data;
                        })
                        .catch(error => {
                            this.$message.error('加载客户列表失败');
                        });
                },
                loadCardList() {
                    axios.get('/api/card/list')
                        .then(response => {
                            this.cardList = response.data.data || response.data;
                        })
                        .catch(error => {
                            this.$message.error('加载银行卡列表失败');
                        });
                },
                loadTradeList() {
                    axios.get('/api/trade/list')
                        .then(response => {
                            this.tradeList = response.data.data || response.data;
                        })
                        .catch(error => {
                            this.$message.error('加载交易记录失败');
                        });
                },
                loadDepositList() {
                    axios.get('/api/deposit/list')
                        .then(response => {
                            this.depositList = response.data.data || response.data;
                            this.depositTypes = response.data.data || response.data;
                        })
                        .catch(error => {
                            this.$message.error('加载存款类型失败');
                        });
                },

                // 表单提交方法
                submitUserForm() {
                    this.$refs.userForm.validate((valid) => {
                        if (valid) {
                            axios.post('/api/user', this.userForm)
                                .then(response => {
                                    this.$message.success('添加客户成功');
                                    this.showUserList();
                                })
                                .catch(error => {
                                    this.$message.error('添加客户失败');
                                });
                        }
                    });
                },
                submitCardForm() {
                    this.$refs.cardForm.validate((valid) => {
                        if (valid) {
                            axios.post('/api/card', this.cardForm)
                                .then(response => {
                                    this.$message.success('添加银行卡成功');
                                    this.showCardList();
                                })
                                .catch(error => {
                                    this.$message.error('添加银行卡失败');
                                });
                        }
                    });
                },

                // 编辑和删除方法
                handleEdit(row) {
                    this.userForm = { ...row };
                    this.isEditUser = true;
                    this.currentView = 'addUser';
                },
                handleDelete(row) {
                    this.$confirm('确认删除该客户?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`/api/user/${row.customerID}`)
                            .then(response => {
                                this.$message.success('删除成功');
                                this.loadUserList();
                            })
                            .catch(error => {
                                this.$message.error('删除失败');
                            });
                    });
                },
                handleCardEdit(row) {
                    this.cardForm = { ...row };
                    this.isEditCard = true;
                    this.currentView = 'addCard';
                },
                handleCardDelete(row) {
                    this.$confirm('确认删除该银行卡?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`/api/card/${row.cardID}`)
                            .then(response => {
                                this.$message.success('删除成功');
                                this.loadCardList();
                            })
                            .catch(error => {
                                this.$message.error('删除失败');
                            });
                    });
                },
                handleTradeDelete(row) {
                    this.$confirm('确认删除该交易记录?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`/api/trade/${row.cardID}/${row.tradeDate}`)
                            .then(response => {
                                this.$message.success('删除成功');
                                this.loadTradeList();
                            })
                            .catch(error => {
                                this.$message.error('删除失败');
                            });
                    });
                },
                handleDepositEdit(row) {
                    this.depositForm = { ...row };
                    this.isEditDeposit = true;
                    this.currentView = 'addDeposit';
                },
                handleDepositDelete(row) {
                    this.$confirm('确认删除该存款类型?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`/api/deposit/${row.savingID}`)
                            .then(response => {
                                this.$message.success('删除成功');
                                this.loadDepositList();
                            })
                            .catch(error => {
                                this.$message.error('删除失败');
                            });
                    });
                },

                // 导出数据方法
                exportUserData() {
                    window.location.href = '/api/export/user';
                },
                exportCardData() {
                    window.location.href = '/api/export/card';
                },
                exportTradeData() {
                    window.location.href = '/api/export/trade';
                },
                exportDepositData() {
                    window.location.href = '/api/export/deposit';
                },

                // 重置表单
                resetUserForm() {
                    this.userForm = { customerName: '', pid: '', telephone: '', address: '' };
                    this.$nextTick(() => {
                        if (this.$refs.userForm) {
                            this.$refs.userForm.resetFields();
                            this.$refs.userForm.clearValidate();
                        }
                    });
                },
                resetCardForm() {
                    this.cardForm = { cardID: '', curID: 'RMB', savingID: '', openMoney: 0, pass: '888888', customerID: '' };
                    this.$nextTick(() => {
                        if (this.$refs.cardForm) {
                            this.$refs.cardForm.resetFields();
                            this.$refs.cardForm.clearValidate();
                        }
                    });
                },
                resetDepositForm() {
                    this.depositForm = { savingID: '', savingName: '', descrip: '' };
                    this.$nextTick(() => {
                        if (this.$refs.depositForm) {
                            this.$refs.depositForm.resetFields();
                            this.$refs.depositForm.clearValidate();
                        }
                    });
                },

                // 新增方法：提交编辑客户
                submitEditUserForm() {
                    this.$refs.userForm.validate((valid) => {
                        if (valid) {
                            axios.put('/api/user', this.userForm)
                                .then(response => {
                                    this.$message.success('修改客户成功');
                                    this.backToUserList();
                                })
                                .catch(error => {
                                    this.$message.error('修改客户失败');
                                });
                        }
                    });
                },
                // 返回客户列表
                backToUserList() {
                    this.isEditUser = false;
                    this.userForm = { customerName: '', pid: '', telephone: '', address: '' };
                    this.showUserList();
                },
                // 新增方法：提交编辑银行卡
                submitEditCardForm() {
                    this.$refs.cardForm.validate((valid) => {
                        if (valid) {
                            axios.put('/api/card', this.cardForm)
                                .then(response => {
                                    this.$message.success('修改银行卡成功');
                                    this.backToCardList();
                                })
                                .catch(error => {
                                    this.$message.error('修改银行卡失败');
                                });
                        }
                    });
                },
                // 新增方法：提交编辑存款类型
                submitEditDepositForm() {
                    this.$refs.depositForm.validate((valid) => {
                        if (valid) {
                            axios.put('/api/deposit', this.depositForm)
                                .then(response => {
                                    this.$message.success('修改存款类型成功');
                                    this.backToDepositList();
                                })
                                .catch(error => {
                                    this.$message.error('修改存款类型失败');
                                });
                        }
                    });
                },
                // 返回银行卡列表
                backToCardList() {
                    this.isEditCard = false;
                    this.cardForm = { cardID: '', curID: 'RMB', savingID: '', openMoney: 0, pass: '888888', customerID: '' };
                    this.showCardList();
                },
                // 返回存款类型列表
                backToDepositList() {
                    this.isEditDeposit = false;
                    this.depositForm = { savingID: '', savingName: '', descrip: '' };
                    this.showDepositList();
                },
                formatDate(dateStr) {
                    if (!dateStr) return '';
                    const d = new Date(dateStr);
                    if (isNaN(d.getTime())) return dateStr;
                    const pad = n => n < 10 ? '0' + n : n;
                    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
                },
                // 根据存款类型ID获取存款类型名称
                getSavingName(savingID) {
                    if (!savingID) return '—';
                    const type = this.depositTypes.find(item => item.savingID === savingID);
                    return type ? type.savingName : savingID;
                },
                searchUsers() {
                    if (!this.userSearchForm.exactId && !this.userSearchForm.keyword && !this.userSearchForm.minId && !this.userSearchForm.maxId) {
                        this.loadUserList();
                        return;
                    }
                    axios.get('/api/user/search', {
                        params: {
                            exactId: this.userSearchForm.exactId,
                            keyword: this.userSearchForm.keyword,
                            minId: this.userSearchForm.minId,
                            maxId: this.userSearchForm.maxId
                        }
                    }).then(response => {
                        if (response.data.code === 200) {
                            this.userList = response.data.data;
                        } else {
                            this.$message.error(response.data.msg || '搜索失败');
                        }
                    }).catch(error => {
                        this.$message.error('搜索失败：' + error.message);
                    });
                },
                searchCards() {
                    if (!this.cardSearchForm.exactCardId && !this.cardSearchForm.keyword && !this.cardSearchForm.minBalance && !this.cardSearchForm.maxBalance) {
                        this.loadCardList();
                        return;
                    }
                    axios.get('/api/card/search', {
                        params: {
                            exactCardId: this.cardSearchForm.exactCardId,
                            keyword: this.cardSearchForm.keyword,
                            minBalance: this.cardSearchForm.minBalance,
                            maxBalance: this.cardSearchForm.maxBalance
                        }
                    }).then(response => {
                        if (response.data.code === 200) {
                            this.cardList = response.data.data;
                        } else {
                            this.$message.error(response.data.msg || '搜索失败');
                        }
                    }).catch(error => {
                        this.$message.error('搜索失败：' + error.message);
                    });
                },
                searchDeposits() {
                    if (!this.depositSearchForm.exactId && !this.depositSearchForm.keyword) {
                        this.loadDepositList();
                        return;
                    }
                    axios.get('/api/deposit/search', {
                        params: {
                            exactId: this.depositSearchForm.exactId,
                            keyword: this.depositSearchForm.keyword
                        }
                    }).then(response => {
                        if (response.data.code === 200) {
                            this.depositList = response.data.data;
                        } else {
                            this.$message.error(response.data.msg || '搜索失败');
                        }
                    }).catch(error => {
                        this.$message.error('搜索失败：' + error.message);
                    });
                },
                resetUserSearch() {
                    this.userSearchForm = { exactId: '', keyword: '', minId: '', maxId: '' };
                    this.loadUserList();
                },
                resetCardSearch() {
                    this.cardSearchForm = { exactCardId: '', keyword: '', minBalance: '', maxBalance: '' };
                    this.loadCardList();
                },
                resetDepositSearch() {
                    this.depositSearchForm = { exactId: '', keyword: '' };
                    this.loadDepositList();
                },
                submitAddDeposit() {
                    axios.post('/api/deposit', this.addDepositForm).then(res => {
                        if (res.data === 1 || res.data.code === 200) {
                            this.$message.success('新增成功');
                            this.showAddDepositDialog = false;
                            this.addDepositForm = { savingName: '', descrip: '' };
                            this.loadDepositList && this.loadDepositList();
                        } else {
                            this.$message.error(res.data.msg || '新增失败');
                        }
                    }).catch(() => {
                        this.$message.error('新增失败');
                    });
                }
            }
        });
    </script>
</body>
</html> 